{include file="../application/admin/view/health/base.html" /}
<style>
	.font-size-14 {
		font-size: 14px;
	}

	.font-size-12 {
		font-size: 12px;
	}

	.background-white {
		background: #fff;
	}

	.background-7536D0 {
		background: #7536D0;
	}

	.color-666 {
		color: #666;
	}

	.color-444 {
		color: #444;
	}

	.color-999 {
		color: #999;
	}

	.color-active {
		color: #7536D0;
	}

	.color-active-1 {
		color: #FFB333;
	}

	.margin-left-10 {
		margin-left: 10px;
	}

	.margin-right-20 {
		margin-right: 20px;
	}

	.display-flex {
		display: flex;
		align-items: center;
	}

	.display-flex-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.display-flex-column {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.common-btn {
		width: 80px;
		line-height: 28px;
		height: 30px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		color: #666;
		text-align: center;
		cursor: pointer;
	}

	.common-btn-active {
		color: #fff;
		background: #7536D0;
		border: 1px solid #7536D0;
	}

	.border-bottom {
		border-bottom: 1px solid #E6E6E6;
	}

	.cursor-pointer {
		cursor: pointer;
	}

	label {
		margin: 0;
	}

	/* 选择 */
	.screen {
		border-radius: 6px;
		padding: 10px 20px;
		margin-bottom: 10px;
	}

	.screen-title {
		justify-content: space-between;
		width: 100%;
	}

	.screen-con {
		display: flex;
		flex-wrap: wrap;
		/* margin-top: 20px; */
	}

	.header-select-item,
	.header-input-item,
	.header-button-item {
		margin-right: 30px;
		margin-bottom: 14px;
		width: 242px;
	}

	.header-select-item .el-select {
		width: 100px;
	}

	.header-input-item .header-input-tip {
		flex: none;
		margin-right: 14px;
	}

	.header-input-item .el-input {
		width: 176px;
	}

	.order-time {
		padding: 0 6px;
		height: 32px;
		border: 1px solid #DCDFE6;
		border-radius: 4px 0px 0px 4px;
		border-right: none;
		flex-shrink: 0;
	}

	.header-button-select {
		background: #7536D0;
		color: #fff;
		margin-left: 20px;
	}

	.order-refresh {
		width: 32px;
		height: 32px;
		border: 1px solid #E6E6E6;
		border-radius: 4px;
		margin-right: 14px;
		justify-content: center;
	}

	.order-refresh i {
		/* animation-name:go; */
		animation-duration: 2s;
		animation-iteration-count: infinite
	}

	.order-refresh .focusi {
		animation-name: go;

	}

	@keyframes go {
		0% {
			transform: rotateZ(0);
		}

		100% {
			transform: rotateZ(360deg);
		}
	}

	/* table */
	.order-table {
		padding: 20px 20px 30px;
		margin-top: 10px;
	}

	.item-box {
		margin-bottom: 8px;
		color: #444;
		width: 100%;
	}

	.expand-item-container {
		/* flex: 1; */
	}

	.expand-item {
		width: 104px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #E6E6E6;
		border-bottom: 1px solid #E6E6E6;
	}

	.expand-item-1 {
		width: 640px;
		border-left: 1px solid #E6E6E6;
	}

	.item-box-item-1-row {
		width: 100%;
		height: 80px;
		padding: 16px 14px 14px;
	}

	.expand-item-4 {
		width: 136px;
	}

	.expand-item-5 {
		width: 94px;
	}

	.expand-item-9 {
		flex-direction: column;
		flex: 1;
	}

	.expand-item-opt {
		flex: 1;
	}

	.item-box-item-more-margin {
		margin-bottom: 4px;
	}

	.item-box-item-name {
		flex-direction: column;
	}

	.item-box-item-name .popover-item {
		margin-bottom: 13px;
	}

	.popover-item-1 {
		height: 30px;
	}

	.item-box-item-detail {
		flex: 1;
		min-width: 80px;
		text-align: center;
	}

	.table-img {
		width: 60px;
		height: 60px;
		margin-right: 14px;
		border: 1px solid #e6e6ee;
		flex-shrink: 0;
	}

	.goods-title {
		width: 526px;
		margin-bottom: 14px;
	}

	.goods-title-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

	.el-collapse-item__header {
		border: none;
	}

	.el-collapse-item__content {
		padding-bottom: 0;
	}

	.el-radio-button__inner:hover {
		color: #666;
	}

	.el-table__expanded-cell[class*=cell] {
		padding: 0;
	}

	.el-table__fixed-right {
		height: 161px;
	}

	tr {
		margin-bottom: 8px;
	}


	.operation-btn {
		width: 26px;
		height: 26px;
		padding: 0;
	}

	.delete-btn {
		width: 90px;
		height: 32px;
		line-height: 32px;
		border: 1px solid #F56C6C;
		border-radius: 4px;
		color: #F56C6C;
		text-align: center;
		float: left;
	}

	.pay-type {
		padding: 0 5px;
		height: 20px;
		background: #E9E2F5;
		border-radius: 4px;
		display: block;
		color: #8A44FC;
		border: 1px solid #B698E7;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.type-alipay {
		border-color: #94BEFB;
		background: #E0EAF9;
		color: #3096FF;
	}

	.type-wechat {
		border-color: #A2E8C4;
		background: #E4F5EC;
		color: #4AD88E;
	}

	.type-score {
		border-color: #F8DCAE;
		background: #FDF5E8;
		color: #F2BA5E;
	}

	.see-detail {
		width: 70px;
		height: 30px;
		line-height: 30px;
		background: rgba(243, 239, 251, 1);
		border: 1px solid rgba(117, 62, 205, 1);
		border-radius: 18px;
	}

	.popover-item-left {
		width: 50px;
		display: block;
	}

	/*.order-dialog*/
	.order-dialog .cell {
		font-size: 12px;
		color: #666;
		font-weight: 400;
	}

	.el-dialog__body {
		padding-top: 10px;
		padding-bottom: 20px;
	}

	.order-dialog .el-dialog__title,
	.el-table thead,
	.has-gutter,
	.order-dialog .el-table,
	.el-form-item__label {
		color: #666;
		font-weight: 400;
	}

	.order-dialog .el-table th {
		background: #F3F3F3;
	}

	.order-dialog .el-table td {
		border-bottom: 1px solid #EBEEF5;
		height: 75px;
		padding: 5px 0;
	}

	.order-dialog .el-table td .cell {
		height: 65px !important;
		justify-content: center;
	}

	.el-form-item {
		margin-bottom: 10px;
	}

	.skill-item,
	.groupon-item {
		/* width: 40px; */
		height: 20px;
		line-height: 20px;
		text-align: center;
		background: rgba(254, 147, 135, 1);
		border-radius: 4px;
		font-size: 12px;
		color: #fff;
		padding: 0 10px;
	}

	.groupon-item {
		background: #A17BDF;
		cursor: pointer;
	}

	.groupon-item-alone {
		cursor: auto;
	}

	.el-dialog {
		border-radius: 6px;
		width: 600px !important;
	}

	.el-dialog__title {
		font-size: 14px;
	}

	.el-input__icon {
		line-height: 32px;
	}

	.margin-right-5 {
		margin-right: 5px;
	}

	.el-form-item__label,
	.el-radio__label,
	.el-form-item__content,
	.el-select-dropdown__item,
	.el-table {
		font-size: 13px;
	}

	.el-form-item {
		margin-bottom: 10px;
	}

	.page-container {
		justify-content: flex-end;
		margin-top: 30px;
	}

	.el-select-dropdown__item.selected {
		color: #7536D0;
	}

	/* select分页 */
	.select-page-container {
		position: relative;
	}

	.select-option-container {
		display: flex;
		align-items: center;
	}

	.select-option-container .option-id {
		width: 100px;
		text-align: left;
	}

	.select-option-container .option-code {
		width: 180px;
		text-align: left;
	}

	.select-option-container .option-name {
		flex: 1;
	}

	.select-pagination {
		position: sticky;
		background: #fff;
		height: 28px;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
	}

	.select-pagination .pagination {
		margin: 0;
	}

	.select-pagination .el-pagination__sizes {
		display: none !important;
	}

	.select-pagination-jumper {
		cursor: pointer;
		color: #7438D5;
		margin-left: 8px;
	}

	/* .order-table .el-table td .cell {
		height: 30px;
		display: flex;
		align-items: center;

	} */

	.screen-container {
		line-height: 32px;
		padding: 0 20px;
		background: #FFFFFF;
		box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.06);
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.screen-container-show {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 14px;
	}

	.screen-container-left,
	.screen-container-right {
		margin-top: 14px;
		flex-wrap: nowrap;
	}

	.arrow-close i {
		animation-iteration-count: infinite;
		transform: rotateZ(0deg);
	}

	.arrow-close {
		width: 36px;
		height: 32px;
		margin-left: 20px;
		background: #7438D5;
		border-radius: 4px;
		color: #fff;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow-open {
		width: 36px;
		height: 32px;
		margin-left: 20px;
		background: #fff;
		border-radius: 4px;
		color: #7438D5;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #7438D5;

	}

	.arrow-close .arrow-container {
		transform: rotateZ(0deg);
		transition: transform .25s linear;
	}

	.arrow-open .arrow-container {
		transform: rotateZ(180deg);
		transition: transform .25s linear;
	}

	.el-table__empty-block {
		border: 1px solid #e6e6e6;
	}

	.border-right {
		border-right: 1px solid #E6E6E6;

	}

	.border-bottom {
		border-bottom: 1px solid #E6E6E6;

	}

	/* table */
	.order-dialog .el-form--inline {
		padding-top: 16px;
	}

	.dialog-deliver-item {
		align-items: flex-start;
		margin-top: 32px;
	}

	.dialog-deliver-label {
		margin-right: 12px;
		flex-shrink: 0;
	}

	.dialog-deliver-list {
		margin-bottom: 8px;
	}

	.dialog-deliver-list:last-child {
		margin-bottom: 0;
	}

	.dialog-deliver-content label {
		margin-bottom: 0;
	}

	.item-box {
		margin-bottom: 8px;
		color: #444;
	}

	.item-box-item {
		height: 80px;
		width: 104px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-box-item-1 {
		width: 683px;
		border-left: 1px solid #E6E6E6;
	}

	.item-box-item-1-box {
		height: 80px;
		border-bottom: 1px solid #E6E6E6;
		padding: 16px 14px 14px;
	}

	.item-box-item-more-margin {
		margin-bottom: 4px;
	}

	.item-box-item-name {
		flex-direction: column;
	}

	.item-box-item-name .el-button {
		padding: 0;
		color: #444;
	}

	.item-box-item-name .popover-item {
		margin-bottom: 13px;
	}

	.popover-item-1 {
		height: 30px;
	}

	.item-box-item-detail {
		flex: 1;
		min-width: 80px;
		text-align: center;
	}

	.order-table .el-table--border {
		border-left: none;
	}

	.el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
		border-left: none;
		border-right: none;
	}

	.el-table_1_column_1 {
		border-left: 1px solid #e6e6e6 !important;
	}

	.el-table_1_column_13 {
		border-right: 1px solid #e6e6e6 !important;
	}

	.ellipsis-item {
		max-width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.choice-item-button {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.choice-item-cancel {
		height: 32px;
		line-height: 32px;
		width: 88px;
		text-align: center;
		color: #999;
		cursor: pointer;
	}

	.choice-item-confirm {
		height: 32px;
		line-height: 32px;
		width: 88px;
		text-align: center;
		color: #fff;
		background: #7438D5;
		border-radius: 4px;
		cursor: pointer;
	}

	.ellipsis-1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.activity-tags {
		margin-bottom: 0px;
	}

	.el-dialog.batchsend-dialog {
		width: 800px !important;
		left: 50%;
		top: 50%;
		margin: -300px 0 0 -400px !important;
	}

	.el-dialog.batchsend-dialog .el-dialog__header {
		border-bottom: 1px solid #D9D9D9;
		padding: 10px 24px 1px;
	}

	.el-dialog.batchsend-dialog .el-dialog__body {
		padding: 16px 24px 0;
	}

	.el-dialog.batchsend-dialog .el-dialog__footer {
		padding: 16px 20px 24px;
	}

	.el-dialog.batchsend-dialog .el-tabs__header {
		margin-bottom: 0px;
	}

	.el-dialog.batchsend-dialog .el-tabs__nav-wrap::after {
		height: 0;
	}

	.batchsend-refresh {
		margin-right: 10px;
		cursor: pointer;
	}

	.el-dialog.batchSendTypeDialog .el-dialog__header {
		border-bottom: 1px solid #D9D9D9;
		padding: 13px 24px 12px;
	}

	.el-dialog.batchSendTypeDialog .el-dialog__body {
		padding: 24px 24px 60px;
	}

	.el-dialog.batchSendTypeDialog .el-dialog__headerbtn {
		top: 16px;
	}

	.el-dialog.batchSendTypeDialog .select-page-container {
		width: 280px;
	}

	.batchSendTypeTitle {
		font-size: 14px;
		line-height: 22px;
		color: #444444;
		margin-bottom: 20px;
		border: 1px solid #e6e6e6;
		padding: 20px;
		border-radius: 4px;
	}

	.batchSendTypeTitle p {
		line-height: 1;
		margin-bottom: 32px;
	}

	.batchSendTypeTitle:hover {
		background: #F1EBFA;
		border: 1px solid #F1EBFA;
	}

	.batchSendTypeDialog .el-button,
	.batchSendTypeDialog .el-button:hover,
	.batchSendTypeDialog .el-button:active,
	.batchSendTypeDialog .el-button:focus {
		background: #FFF;
		border: 1px solid #DCDFE6;
		color: #606266;
	}

	.batchSendTypeDialog .el-button--primary,
	.batchSendTypeDialog .el-button--primary:hover,
	.batchSendTypeDialog .el-button--primary:active,
	.batchSendTypeDialog .el-button--primary:focus {
		background: #7438D5;
		border-color: #7438D5;
		color: #fff;
	}

	.screen-button {
		margin-right: 10px;
	}

	.screen-button:last-child {
		margin-right: 0;
	}

	.el-date-editor .el-range-separator {
		line-height: 25px;
	}

	[v-cloak] {
		display: none
	}

	.custom-filter-wrap {
		padding: 12px 20px;
		display: block;
		color: #444444;
		border: 1px solid #E6E6E6;
		border-bottom: none;
	}

	.order-goods-list {
		width: 100%;
	}

	.order-goods-list .goods-image {
		margin-right: 14px;
	}
</style>
<div id="containerBox" v-cloak>
	<div class="screen-container" v-if="false">
		<div class="screen-container-show">
			<div class="screen-container-right display-flex">
				<div class="display-flex margin-right-20">
					<div class="color-666 order-time">下单时间</div>
					<el-date-picker v-model="searchForm.create_time" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
					                format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
					                end-placeholder="结束日期"
					                @change="reqOrderList(0,10)" align="right" size="small"
					                :default-time="['00:00:00', '23:59:59']">
					</el-date-picker>
				</div>
			</div>
		</div>
	</div>
	<!-- 订单列表 -->
	<div class="order-table background-white color-666">
		<el-table :data="orderList" style="width: 100%" ref="multipleTable" tooltip-effect="dark" border>
			<el-table-column width="200" prop="order_no" label="订单号"></el-table-column>
			<el-table-column width="200" prop="order_no" label="商品信息">
				<template slot-scope="scope">
					<div class="order-goods-list">
						<div class="display-flex" style="margin-bottom: 5px;"
						     v-for="(item,index) in scope.row.order_item" :key="index">
							<div class="goods-item">
								<div class="display-flex">
									<div class="goods-title goods-title-ellipsis">
										{{item.goods_name}}
									</div>
								</div>
								<div class="color-999 display-flex">
									<span style="margin-right: 10px;">单价：{{item.price}}元</span>
									<span style="margin-right: 10px;">数量：{{item.number}}</span>
								</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column min-width="120" label="下单用户">
				<template slot-scope="scope">
					<el-link type="primary" @click="operation('user_profile',scope.row.user_id)">
						{{scope.row.user.mobile}}
					</el-link>
				</template>
			</el-table-column>
			<el-table-column label="订单状态">
				<template slot-scope="scope">
					{{scope.row.order_status_txt}}
				</template>
			</el-table-column>
			<el-table-column min-width="120" prop="total_price" label="订单金额(元)"></el-table-column>
			<el-table-column min-width="120" prop="discount_price" label="优惠券金额(元)"></el-table-column>
			<el-table-column min-width="120" prop="pay_price" label="支付金额(元)"></el-table-column>
			<el-table-column min-width="180" align="center" prop="created_at" label="下单时间"></el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<div style="width: 100%;display: flex;align-items: center;justify-content: center;"
					     class="color-active cursor-pointer" @click="operation('detail',scope.row.id)">详情
					</div>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-container display-flex">
			<el-pagination background :hide-on-single-page="true" style="float: right;" @size-change="handleSizeChange"
			               @current-change="handleCurrentChange" :current-page="paginate.page"
			               :page-sizes="[10, 20, 30, 40]" :page-size="10"
			               layout="total, sizes, prev, pager, next, jumper" :total="paginate.total">
			</el-pagination>
		</div>
	</div>
</div>